<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-pie-chart"></i> 决策收益销售增长比例</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
              <div id="echart1"></div>
            </div>
            <div ref="commandstats" style="height: 260px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-odometer"></i> 决策收益占比率</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
              <div id="echart2"></div>
            </div>
            <div ref="usedmemory" style="height: 260px" />
          </div>
        </el-card>
      </el-col>

<!--      <el-col :span="12" class="card-box">-->
<!--        <el-card>-->
<!--          <div slot="header"><span><i class="el-icon-pie-chart"></i> 决策收益增长趋势</span></div>-->
<!--          <div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">-->
<!--            <div>-->
<!--              <div id="echart3"></div>-->
<!--            </div>-->
<!--            <div ref="commandstats" style="height: 260px" />-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->

<!--      <el-col :span="12" class="card-box">-->
<!--        <el-card>-->
<!--          <div slot="header"><span><i class="el-icon-odometer"></i> 决策收益因素发展趋势</span></div>-->
<!--          <div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">-->
<!--            <div>-->
<!--              <div id="echart4"></div>-->
<!--            </div>-->
<!--            <div ref="usedmemory" style="height: 260px" />-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {};
  },
  // 页面初始化挂载dom
  mounted() {
    // this.getLoadEcharts();
    // this.openLoading();
    setTimeout(() => {
      this.getLoadEcharts1()
    }, 1000);
    setTimeout(() => {
      this.getLoadEcharts2()
    }, 1000);
  },
  methods: {
    getLoadEcharts1() {
      var myChart = this.$echarts.init(
        document.getElementById("echart1")
      );
      var option = {
        "backgroundColor": "#fff",
        "color": [
          "#72A9FE",
          "#FFC533",
          "#56C994",
          "#F6856E",
        ],
        "title": {
        },
        "legend": {
          "orient": "horizontal",
          "data": [
            {
              "name": "生产"
            },
            {
              "name": "加工"
            },
            {
              "name": "制造"
            },
            {
              "name": "销售"
            },
            {
              "name": "生产占比"
            },
            {
              "name": "加工占比"
            },
            {
              "name": "制造占比"
            },
            {
              "name": "销售占比"
            }
          ],
          "left": 0,
          "top": "4%",
          "textStyle": {
            "color": "#666",
            "fontSize": 14
          }
        },
        "grid": {
          left: '2%',
          right: '4%',
          bottom: '6%',
          top: '16%',
          "containLabel": true
        },
        "tooltip": {
          "trigger": "axis",
          "axisPointer": {
            "type": "shadow"
          },
          "textStyle": {
            "align": "left"
          }
        },
        "xAxis": [
          {
            "type": "category",
            "data": [
              '2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07', '2024-08', '2024-09'
            ],
            "axisTick": {
              "show": false,

            },
            "axisLine": {
              "show": true,
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            "axisLabel": {
              "show": true,
              "textStyle": {
                "color": "#282828",
                "fontSize": 14
              },
              "formatter": "{value}"
            },

          }
        ],
        "yAxis": [
          {
            "type": "value",
            "max": "260",
            "axisTick": {
              "show": false
            },
            "axisLine": {
              "show": true,
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            "axisLabel": {
              "show": true,
              "textStyle": {
                "color": "#282828",
                "fontSize": 14
              }
            },
            "splitLine": {
              "show": false,
              "lineStyle": {
                "color": "rgba(255,255,255,0.2)"
              }
            }
          },
          {
            type: "value",
            name: "百分比",
            "max": "45",
            nameTextStyle: {
              color: "#666666"
            },
            position: "right",
            axisLine: {
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#666666",
                fontSize: 14,
              }
            }
          }
        ],
        dataZoom: [
          {
            show: true,
            realtime: true,
            "height": 12,
            start: 0,
            end: 70,
            bottom: '2%',
          },
          {
            type: 'inside',
            realtime: true,
            "height": 12,
            start: 0,
            end: 70
          }
        ],
        "series": [
          // {symbol: 'circle'},
          {
            "name": "生产",
            "type": "bar",
            "stack": "总量",
            "barWidth": "40%",
            "data": [
              "42",
              "44",
              "40",
              "39",
              "45",
              "49",
              "45",
              "37",
              "34",
              "31",
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  //
                  textStyle: { //数值样式
                    color: '#333',
                    fontSize: 14
                  }
                }
              }
            }

          },
          {
            "name": "加工",
            "type": "bar",
            "stack": "总量",
            "barWidth": "40%",
            "data": [
              "12",
              "14",
              "12",
              "12",
              "15",
              "16",
              "19",
              "20",
              "21",
              "3",
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  textStyle: { //数值样式
                    color: '#333',
                    fontSize: 14
                  }
                }
              }
            }

          },
          {
            "name": "制造",
            "type": "bar",
            "stack": "总量",
            "barWidth": "40%",
            "data": [
              "33",
              "34",
              "36",
              "39",
              "44",
              "49",
              "65",
              "69",
              "75",
              "3",
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  textStyle: { //数值样式
                    color: '#333',
                    fontSize: 14
                  }
                }
              }
            }

          },
          {
            "name": "销售",
            "type": "bar",
            "stack": "总量",
            "barWidth": "40%",
            "data": [
              "10",
              "10",
              "10",
              "10",
              "11",
              "11",
              "11",
              "10",
              "10",
              "3",
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  //      position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#333',
                    fontSize: 14
                  }
                }
              }
            }

          },
          {
            name: "生产占比",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: '#72A9FE',
                borderColor: 'rgba(114, 169, 254, 0.5)',  //圆点透明 边框
                borderWidth: 7
              },

            },
            lineStyle: {
              color: "#72A9FE"
            },
            data: [
              "31",
              "32",
              "33",
              "34",
              "36",
              "38",
              "29",
              "40",
              "42",
              "44",]
          },
          {
            name: "加工占比",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: '#FFC533',
                borderColor: 'rgba(255, 197, 51, 0.5)',  //圆点透明 边框
                borderWidth: 7
              },

            },
            lineStyle: {
              color: "#FFC533"
            },
            data: [
              "33",
              "34",
              "36",
              "38",
              "39",
              "41",
              "27",
              "29",
              "31",
              "34",]
          },
          {
            name: "制造占比",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: '#56C994',
                borderColor: 'rgba(86, 201, 148, 0.5)',  //圆点透明 边框
                borderWidth: 7
              },

            },
            lineStyle: {
              color: "#56C994"
            },
            data: ["23",
              "24",
              "26",
              "28",
              "29",
              "31",
              "32",
              "31",
              "33",
              "34",]
          },
          {
            name: "销售占比",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: '#F6856E',
                borderColor: 'rgba(246, 133, 110, 0.5)',  //圆点透明 边框
                borderWidth: 7
              },

            },
            lineStyle: {
              color: "#F6856E"
            },
            data: ["30",
              "32",
              "34",
              "39",
              "41",
              "32",
              "30",
              "25",
              "28",
              "34",]
          }

        ]
      }

      myChart.setOption(option);
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载缓存监控数据，请稍候！");
    },
    getLoadEcharts2() {
      var myChart = this.$echarts.init(
        document.getElementById("echart2")
      );
      var option = {
        backgroundColor:'#000',
        tooltip: {
          // show: false // 弹层数据去掉
        },
        legend: {
          show: false
        },
        radar: {
          center: ['50%', '50%'], // 外圆的位置
          radius: '70%',
          axisName: {
            name: {
              color: '#fff',
              fontSize: 12,
              fontWeight: 400,
            },
          },
          // TODO:
          indicator: [{
            name: '产业规模效益',
            max: 100
          },
            {
              name: '产业资源利用率',
              max: 100
            },
            {
              name: '产业质量水平',
              max: 100
            },
            {
              name: '产业报警处理率',
              max: 100
            },
            {
              name: '产业资源可控度',
              max: 100
            },
            {
              name: '产业技术水平',
              max: 100
            }
          ],
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['#1c2330'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
          },
          axisLine: {
            // 指向外圈文本的分隔线样式
            lineStyle: {
              // color: 'rgba(255,255,255,0.2)'
              color: 'rgba(255,255,255,0.7)'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#1781BA', // 分隔线颜色
              width: 1 // 分隔线线宽
            }
          }
        },
        series: [{
          type: 'radar',
          symbolSize: 5,
          symbol: "circle",
          data: [{
            // TODO:
            value: [80, 80, 80, 70, 60, 50],
            name: '库存资源',
            areaStyle: {
              color: "#39B2FF",
              opacity: 0.3
            },
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00A2FF'
              }, {
                offset: 1,
                color: '#0060FF'
              }], false),
              width: 1
            },
            color: "#81B8CC ",
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00DEFF'
            }, {
              offset: 1,
              color: '#1598FF'
            }], false),
            borderWidth: 0.5,
            opacity: 1
            // itemStyle: {

            // },
          }]
        }]
      };
      myChart.setOption(option);
    },
    // getLoadEcharts3() {
    //   var myChart = this.$echarts.init(
    //     document.getElementById("echart3")
    //   );
    //   var option = {
    //     xAxis: [
    //       {
    //         type: 'category',
    //         gridIndex: 0,
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //       },
    //       {
    //         type: 'category',
    //         gridIndex: 1,
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //       },
    //       {
    //         type: 'category',
    //         gridIndex: 2,
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //       }
    //     ],
    //     yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }, { gridIndex: 2 }],
    //     grid: [
    //       {
    //         x: '5%',
    //         y: '25%',
    //         width: '25%',
    //         height: '75%',
    //         containLabel: true
    //       },
    //       {
    //         x: '32.5%',
    //         y: '25%',
    //         width: '30%',
    //         height: '75%',
    //         containLabel: true
    //       },
    //       {
    //         x2: '5.25%',
    //         y: '25%',
    //         width: '30%',
    //         height: '75%',
    //         containLabel: true
    //       }
    //     ],
    //     series: [
    //       {
    //         data: [150, 230, 24, 218, 135, 147, 260],
    //         type: 'line'
    //       },
    //       {
    //         data: [10, 23, 22, 18, 15, 17, 20],
    //         type: 'line',
    //         xAxisIndex: 1, yAxisIndex: 1
    //       },
    //       {
    //         data: [1500, 2300, 2204, 2108, 1305, 1407, 2060],
    //         type: 'line',
    //         xAxisIndex: 2, yAxisIndex: 2
    //       }
    //
    //     ]
    //   };
    //   myChart.setOption(option);
    // },
    getLoadEcharts4() {
      var myChart = this.$echarts.init(
        document.getElementById("echart2")
      );
      // 默认数据
      let xDate = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',]
      let pieData = [
        {
          name: '总有功功率',
          data: generateRandomArray(12, 0, 100),
        },
        {
          name: 'A相有功功率',
          data: generateRandomArray(12, 0, 100),
        },
        {
          name: 'B相有功功率',
          data: generateRandomArray(12, 0, 100),
        },
        {
          name: 'C相有功功率',
          data: generateRandomArray(12, 0, 100),
        },
      ]
      let unit = '单位:kW'
// 默认配色
      let colorList = ['#3D84F7', '#737373', '#00FAC1', '#00CAFF', '#FDE056', '#3aa272']
      let series = [];
      pieData.map((item, index) => {
        series.push({
          name: item.name,
          type: 'line',
          // smooth:true,
          stack: '总量',
          symbolSize: 0,
          itemStyle: {
            normal: {
              color: colorList[index],
              lineStyle: {
                color: colorList[index],
                width: 2
              },
            }
          },
          data: item.data
        })
      })
      let dataZoom = []
      if (xDate.length > 7) {
        dataZoom = [{
          show: true,
          height: 12,
          xAxisIndex: [
            0
          ],
          bottom: '3%',
          start: 10,
          end: 90,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'
          },
          textStyle: {
            color: '#313131'
          },
          borderColor: '#90979c'
        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }]
      }
      const option = {
        //你的代码
        color: colorList,
        backgroundColor: '#fff',
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '15%',
          // containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        legend: {
          show: true,
          icon: 'stack',
          itemWidth: 15,
          itemHeight: 4,
          textStyle: {
            color: '#646464'
          },
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: 1,
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#252525'
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: xDate
          }],
        yAxis: [
          {
            type: 'value',
            name: unit,
            nameTextStyle: {
              align: "center",
              padding: [10, -10, 0, -50],
              color: '#151515',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#A1A7B3',
                type: 'dashed'
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: '#3b3b3c'
              }
            },
            axisTick: {
              show: false
            }
          }],
        dataZoom,
        series: series
      }

      function generateRandomArray(size, min, max, decimalPlaces = 0) {
        let arr = [];
        if (min > max) {
          [min, max] = [max, min];
        }
        for (let i = 0; i < size; i++) {
          // 生成一个介于min和max之间的随机数
          let randomNum = min + Math.random() * (max - min);
          // 将随机数格式化为指定的小数位数
          arr.push(randomNum.toFixed(decimalPlaces));

        }
        return arr;
      }

      myChart.setOption(option);
    },
  }

};

</script>
<style scoped>
#echart1{
  width: 600px;
  height: 260px;
}
#echart2{
  width: 600px;
  height: 260px;
}
#echart3{
  width: 600px;
  height: 260px;
}
#echart4{
  width: 600px;
  height: 260px;
}

</style>


